<template>
	<view>
		<u-index-list :scrollTop="scrollTop">
			<view v-for="(item, index) in indexList" :key="index">
				<u-index-anchor :index="item" />
				<view class="list-cell pl-2 py-1 border-bottom" v-for="(city,keyIndex) in cityList[item]" :key="keyIndex"
					@click="selectFn(city)">
					{{city.label}}
				</view>
			</view>
		</u-index-list>
	</view>
</template>

<script>
	import {
		sortAndGroupByLetter
	} from '@/utils/groupByInitial.js'
	import {
		getRegionsById
	} from "@/api/common.js";
	export default {
		data() {
			return {
				scrollTop: 0,
				indexList: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T",
					"U", "V", "W", "X", "Y", "Z"
				],
				cityList: {}
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		created() {
			this.getRegionsById()
		},
		methods: {
			selectFn(val) {
				uni.setStorageSync("selectCurrentAddress", {
					label: val.label,
					value: val.value
				})
				uni.navigateBack()
			},
			getRegionsById() {
				const tree = uni.getStorageSync('areaTree') || []
				console.log(tree)
				if (tree.length) {
					const cityList = tree.map(item => item.children).flat()
					this.cityList = sortAndGroupByLetter(cityList)
				}
			}
		}
	}
</script>

<style>

</style>